<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/axios/dist/axios.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DNSLog</title>
</head>

<body>
    <div id="app" class="div_1">
        <img src="/img/logo.jpg" id="img_1">
        <table id="table_1">
            <tr id="tr_2">
                <td id="td_1">序号</td>
                <td id="td_2">IP</td>
                <td id="td_3">时间</td>
            </tr>
            <tr v-for="(item,index) in res" :key="item.index" id="tr_1">
                <td id="td_1">{{index}}</td>
                <td id="td_2">{{item.ip}}</td>
                <td id="td_2">{{item.date}}</td>
            </tr>
        </table>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    var app = new Vue({
        el: '#app',
        data: {
            res: null,
        },
        created() {
            axios
                .get("/queryDNSLog")
                .then(resonse => (
                    this.res = resonse.data.data
                )
                )
        }
    });

</script>
<style>
    .div_1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100px;
    }

    #img_1 {
        border-radius: 50%;
        width: 150px;
        height: 150px;
    }

    #table_1 {
        align-items: center;
        align-content: center;
        text-align: center;
        padding-top: 50px;
        border-spacing: 0;
        /*把单元格间隙设置为0*/
    }

    #tr_1 {
        width: 500px;
    }

    #tr_2 {
        width: 500px;
        height: 50px;
    }

    #td_1 {
        width: 50px;
        border-bottom: 1px solid rgb(148, 145, 145);
    }

    #td_2 {
        border-bottom: 1px solid rgb(148, 145, 145);
        width: 200px;
    }

    #td_3 {
        border-bottom: 1px solid rgb(148, 145, 145);
        width: 200px;
    }
</style>

</html>